<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ page import="com.solution.common.config.PublicConfig"%>
<%@ page import="com.solution.admin.home.constants.IndexConstants"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sl" tagdir="/WEB-INF/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String basePath = PublicConfig.ROOT_PATH;
	String imgRootURL = PublicConfig.IMG_ROOT_URL;
	String ossImgZoomWX = PublicConfig.OSS_IMG_ZOOM_WX; //微信图片缩放
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>我的客户</title>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/statics_wx/css/main2.css">
<script src="<%=basePath%>/statics/js/webform.js" type="text/javascript"></script>
<script type="text/javascript">
//系统域名 
var rootPath = '<%=basePath%>';
// 系统上传文件展示域名
var imgRootURL = '<%=imgRootURL%>';
// 微信图片缩放
var ossImgZoomWX = '<%=ossImgZoomWX%>';
</script>
<script src="<%=basePath%>/statics_wx/js/jquery.min.js" type="text/javascript"></script>
<script src="<%=basePath%>/statics_wx/js/js.js" type="text/javascript"></script>
<script src="<%=basePath%>/statics/plugins/layer/layer.js" type="text/javascript"></script>
</head>
<body style="background: #f3f3f3">
	<c:set var="rootPath" value="<%=basePath%>"></c:set>
	<c:set var="imgRootURL" value="<%=imgRootURL%>"></c:set>
	<c:set var="ossImgZoomWX" value="<%=ossImgZoomWX%>"></c:set>
	<input type="hidden" id="sync_page_num" pname="pageNum" value="${pageBean.currentPage }" />
	<input type="hidden" id="sync_num_per_page" pname="numPerPage" value="${pageBean.numPerPage}" />
	<input type="hidden" id="sync_page_count" pname="pageCount" value="${pageBean.pageCount }" />
	
<div class="header">
	<div class="icon_back">
		<a href="#"></a>
	</div>
	<h1>我的客户</h1>
</div>
<div class="headerfixed"></div>
<div class="search_part" style="box-shadow:0 0 0 #ccc">
	<div class="search_part_con">
		<p>
			<i id="doSearchCustomer"></i><span><input type="search" id="searchKey" class="inputstyle1" placeholder="客户名称/手机号码" value="${searchKey }" onchange="javascript: jumpLocalPage();"/></span>
		</p>
	</div>
</div>
<div class="kh_part">
	<div class="hd">
		<div id="areaSearchPart" class="left">
			<strong>
				<span>${empty areaValue ? '全部' : areaValue }</span>
				<i></i>
			</strong>
		</div>
		<div class="right"><input type="checkbox" id="isValid" <c:if test="${not empty isValid }"> checked="checked" </c:if> onchange="javascript: jumpLocalPage();"/>
			<label onclick="javascript: doChk();" <c:if test="${not empty isValid }"> class="checked" </c:if> ><i></i><span>有效</span></label>
		</div>
	</div>
	<div class="kh_list">
		<c:choose>
			<c:when test="${not empty customerList }">
					<ul id="customerUL">
						<c:forEach items="${customerList }" var="customer">
							<li><div class="boxs_2">
								<div class="pic">
									<c:choose>
										<c:when test="${fn:contains(customer.headImage, 'http')}">
											<img src="${customer.headImage }" onerror="this.src='${rootPath }/statics_wx/images/cp_pic.png'" />
										</c:when>
										<c:otherwise>
											<img src="${imgRootURL }${customer.headImage }${ossImgZoomWX }" onerror="this.src='${rootPath }/statics_wx/images/cp_pic.png'" />
										</c:otherwise>
									</c:choose>
								</div>
								<div class="item-info">
									<h2><strong>${customer.userName }</strong><b>${customer.mobile }</b></h2>
									<h3><i></i><span>${customer.address }</span></h3>
									<dl><dt><strong class="a1">销售额</strong>
											<p>共 ${customer.orderCount } 笔订单，总计￥${customer.totalOrderMoney }</p></dt>
										<dt><strong class="a2">有效期</strong>
												<p>截止至 <fmt:formatDate value="${customer.expDate }" pattern="yyyy-MM-dd" /></p></dt>
								</dl></div></div></li>
						</c:forEach>
					</ul>
				</c:when>
			<c:otherwise>
				<p>暂无数据</p>
			</c:otherwise>
		</c:choose>
	</div>
</div>
<jsp:include page="../../wx_footer.jsp" />
<!-- 省市区-街道选择 begin -->
<div class="overlay" id="areaPart" style="display: none;">
	<div class="szdq_part">
		<div class="hd">
			<h3>区域</h3>
			<!-- <span> <a href="#" ><h3 style="color:red;">完成</h3></a></span> -->
		</div>
		<div class="bd">
			<div class="dq_list" id="areaCombo" style="display:block;">
				<ul id="streetUl">
					<li value="" onclick="javascript: doSelectLi(this);">全部</li>
					<c:forEach items="${areaList }" var="area">
						<li value="${area.value }" onclick="javascript: doSelectLi(this);"
							<c:if test="${area.value eq areaCode }"> class="current" </c:if>xc
						> ${area.text } </li>
					</c:forEach>
				</ul>
				<input type="hidden" id="areaCode" value="${areaCode }"/>
				<input type="hidden" id="areaValue" value="${areaValue }"/>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
$(function(){
	$("#areaSearchPart").click(function(){
		$("#areaPart").show();
	});
})

//关键字查询
$("#searchKey").keydown(function(event){
	if(event.keyCode == 13){ 
		jumpLocalPage();
	} 
});

//搜索
$("#doSearchCustomer").click(function(){
	jumpLocalPage();
});

function doChk() {
	if($("#isValid").attr("checked")) {
		$("#isValid").removeAttr("checked");
	} else {
		$("#isValid").attr("checked", true);
	}
	jumpLocalPage();
}

function doSelectLi(this_) {
	var areaCode = $(this_).attr("value");
	var areaValue = $(this_).text();
	$("#areaCode").val(areaCode);
	$("#areaValue").val(areaValue);
	jumpLocalPage();
}
/**
 * 跳转页面
 */
function jumpLocalPage() {
	var searchKey = $("#searchKey").val();
	url = rootPath + "/wx/customer/myCustomer";
	var form = $('<form></form>');  
	form.attr('action', url);
	form.attr('method', 'post');
	form.attr('target', '_self');
	form.append("<input type=\"hidden\" name=\"searchKey\" value=\"" + searchKey + "\"/>");
	if($("#isValid").attr("checked")) {
		form.append("<input type=\"hidden\" name=\"isValid\" value=\"1\"/>");
	}
	var val = $("#areaCode").val();
	if(val) {
		form.append("<input type=\"hidden\" name=\"areaCode\" value=\"" + val + "\"/>");
		form.append("<input type=\"hidden\" name=\"areaValue\" value=\"" + $("#areaValue").val() + "\"/>");
	}
	form.appendTo("body");
	form.submit();
}



//请求数据是否完成
var isComplete = true;
$(window).on( 'scroll', function() {
	if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
		var page_count = $("#sync_page_count").val();
		var current_page = $("#sync_page_num").val();
		if (current_page >= page_count) {
// 			layer.msg('已经到底了', {
// 				time : 500
// 			});
			return false;
		}
		var params = "requestType=sync";
		$("input[id^='sync_']").each(function() {
			if ($(this).attr("pname") == "pageNum") {
				params = params + "&" + $(this).attr("pname") + "=" + (parseInt($(this).val()) + 1);
			} else {
				params = params + "&" + $(this).attr("pname") + "=" + $(this).val();
			}
		});
		if($("#isValid").attr("checked")) {
			params += "&isValid=1";
		}
		params += "&areaCode=" + $("#areaCombo").val();
		params += "&searchKey=" + $("#searchKey").val();
		var url = rootPath + "/wx/customer/myCustomer";
		// 如果上一次请求还未完成，则本次请求忽略
		if(!isComplete) {
			return false;
		}
		// 开始请求
		isComplete = false;
		$.ajax({
				type : "post",
				url : url,
				data : params,
				datatype : "json",
				success : function(jsonObject) {
					var json = $.parseJSON(jsonObject);
					$("#sync_page_num").val(json.currentPage);
					if (json.recordList) {
						// 请求已完成
						isComplete = true;
						var customerUL = '';
						for (var i = 0; i < json.recordList.length; i++) {
							var customer = json.recordList[i];
							customerUL += '<li><div class="boxs_2">';
							customerUL += '<div class="pic">';
							customerUL += '<img src="'+imgRootURL + customer.headImage +'" onerror="this.src=\'' + rootPath + '/statics_wx/images/cp_pic.png\'" /></div>';
							customerUL += '<div class="item-info">';
							customerUL += '	<h2><strong>' + customer.userName + '</strong><b>' + customer.mobile + '</b></h2>';
							customerUL += '	<h3><i></i><span>' + customer.address + '</span></h3>';
							customerUL += '	<dl><dt><strong class="a1">销售额</strong>';
							customerUL += '			<p>共 ' + customer.orderCount + ' 笔订单，总计￥' + customer.totalOrderMoney + '</p></dt>';
							customerUL += '		<dt><strong class="a2">有效期</strong>';
							customerUL += '				<p>截止至 ' + formatDate(customer.expDate) + '</p></dt>';
							customerUL += '</dl></div></div></li>';
						}
						$("#customerUL").append(customerUL);
					}
				},
				error : function() {
					layer.msg('查询失败', {
						time : 1000
					});
				}
			});
		}
	});
</script>
</body>
</html>